<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
           "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Light</title>
    <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/resources/dojo.css" type="text/css" rel="stylesheet" media="screen">
    <link href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dijit/themes/claro/claro.css" type="text/css" rel="stylesheet" media="screen">
    <script>
    dojoConfig = {
      async: true,
      isDebug: true,
      waitSeconds: 2
    };
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"></script>
    <script>
    require(['dojo/store/JsonRest',
             'dojo',
             'dijit',
             'dojo/on',
             'dojo/_base/xhr',
             'dojo/parser',
             'dijit/form/Form',
             'dijit/form/Button',
             'dijit/form/TextBox',
             'dijit/form/Select',
             'dijit/form/Textarea',
             'dojo/domReady!'
             ],
            function(
                JsonRest,
                dojo,
                dijit,
                on,
                xhr,
                parser
                ) {
      parser.parse();
      var answerTextarea = dijit.byId("answer");
      var contentTextarea = dijit.byId("content");
      var operationSelect = dijit.byId("operation");
      var targetTextbox = dijit.byId("target");
      var idTextbox = dijit.byId("id");
      var sendButton = dijit.byId("send");
      var iframe = dojo.byId("iframe");
      function reportError(txt) {
        answerTextarea.set('value', 'Error:\n'+txt);
      }
      function isNonEmptyString(id) {
        return typeof id == "string" && id != "";
      }
      function showIframeIfHTML(something, ioArgs){
        var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
        if(ioArgs.xhr.getResponseHeader('Content-Type').split(';')[0] == 'text/html') {
          frameDoc.documentElement.innerHTML = ioArgs.xhr.response;
          iframe.style.display = "block";
        } else {
          frameDoc.documentElement.innerHTML = "";
          iframe.style.display = "none";
        }
      }
      sendButton.onClick = function() {
        answerTextarea.set('value', 'Loading ...');
        var operation = operationSelect.get('value');
        var target = targetTextbox.get('value');
        var id = encodeURIComponent(idTextbox.get('value'));
        var content = contentTextarea.get('value');
        if(!isNonEmptyString(target)) {
          reportError('empty target');
          return;
        }
        var store = new JsonRest({target: target});
        var promise;
        if(operation == 'get') {
          if(!isNonEmptyString(id)) {
            reportError('empty id');
            return;
          }
          promise = xhr("GET", {
            url:target + id,
            headers: {
                'Content-Type': 'application/json'
            },
            load: showIframeIfHTML,
            error: showIframeIfHTML
          });
        } else if(operation == 'put') {
          var options = {}
          if(isNonEmptyString(id)) {
            options.id = id;
          }
          try {
            content = dojo.fromJson(content);
          } catch(e) {
            reportError('could not parse content JSON');
            return;
          }
          promise = store.put(content, options);
        } else if(operation == 'remove') {
          if(!isNonEmptyString(id)) {
            reportError('empty id');
            return;
          }
          promise = store.remove(id);
        } else {
          reportError('no operation selected');
          return;
        }
        
        promise.then(function(answer) {
          answerTextarea.set('value', answer);
        }, function(error) {
            var msg = 'XHR failed!\n'+error;
            if(error.xhr)
                msg+=' statusText:'+error.xhr.statusText;
            reportError(msg);
        })
      }
    });
    </script>
    
  </head>
  <body class="claro">
    <form>
    <table style="border: 1px solid #9f9f9f;" cellspacing="10">
        <tr>
            <td>
                <label>Target:</label>
            </td>
            <td>
                <input type="text" id="target" name="target" autocomplete="on" data-dojo-type="dijit.form.TextBox" value="/api/search?query=asd&page=1&clientLanguageCode="/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Id:</label>
            </td>
            <td>
                <input type="text" id="id" name="id" autocomplete="on" data-dojo-type="dijit.form.TextBox" value="en-us"/>
            </td>
        </tr>
        <tr>
            <td>
                <label>Dojo JsonRest Store Operation:</label>
            </td>
            <td>
                
        <select id="operation" data-dojo-type="dijit.form.Select">
            <option value="get" selected="selected">get</option>
            <option value="put">put</option>
            <option value="remove">remove</option>
        </select>
            </td>
        </tr>
        <tr>
            <td>
                <label>Content:</label>
            </td>
            <td>
                <textarea id="content" data-dojo-type="dijit.form.Textarea" style="width:700px">{}</textarea>
            </td>
        </tr>
    </table>

    <button data-dojo-type="dijit.form.Button" id="send">Send</button>
    
    <table style="border: 1px solid #9f9f9f;" cellspacing="10">
        <tr>
            <td>
                <label for="name">Answer:</label>
            </td>
            <td>
                <iframe id="iframe" src="about:blank" style="width:700px; display:none; height: 400px"></iframe>
                <textarea id="answer" data-dojo-type="dijit.form.Textarea" style="width:700px"></textarea>
            </td>
        </tr>
    </table>
    </form>
  </body>
</html>